<template>
  <div class="customer-detail-box">
    <el-card class="box-card" style="margin-bottom:10px">
      <div slot="header" class="clearfix">
        <span>客户信息&nbsp;ID：{{ form.id }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">客户姓名：{{ form.name }}</el-col>
        <el-col :span="6">手机号：{{form.phone}}</el-col>
        <el-col :span="6">职业：{{occupationFormat(form.occupation)}}</el-col>
        <el-col :span="6">学历：{{educationFormat(form.education)}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">所在地区：{{ form.provinces }}{{ form.city }}</el-col>
        <el-col :span="6">客户微信：{{ form.weixin }}</el-col>
        <el-col :span="6">客户年龄：{{ form.age }}</el-col>
        <el-col :span="6">专业：{{ majorFormat(form.major) }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">在职情况：{{ jobFormat(form.job) }}</el-col>
        <el-col :span="6">当前薪资：{{ salaryFormat(form.salary) }}</el-col>
        <el-col :span="6">客户QQ：{{form.qq}}</el-col>
        <el-col :span="6">性别：{{sexFormat(form.sex)}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">目标薪资：{{ salaryFormat(form.expectedSalary) }}</el-col>
        <el-col :span="6">备注：{{ form.remark }}</el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-bottom:10px">
      <div slot="header" class="clearfix">
        <span>客户意向</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">意向学科：{{ subjectFormat(form.subject) }}</el-col>
        <el-col :span="6">学习原因：{{ form.reasons }}</el-col>
        <el-col :span="6">职业计划：{{ form.plan }}</el-col>
        <el-col :span="6">时间计划：{{ form.planTime }}</el-col>
      </el-row>
        <el-row :gutter="20">
        <el-col :span="6">意向课程：{{ form.courseId }}</el-col>
        <el-col :span="6">意向金额：{{ form.weixin }}</el-col>
        <el-col :span="6">其他意向：{{ form.otherIntention }}</el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>跟进记录</span>
      </div>
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="createTime" label="本次沟通时间"></el-table-column>
        <el-table-column prop="keyItems" label="沟通重点">
          <template slot-scope="scope">
            <div v-if="scope.row.keyItems">
              <span v-for="item in (scope.row.keyItems.split(','))" :key="item">
                {{ keyItemsFormat(item) }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="record" label="沟通状态">
          <template slot-scope="scope">
            {{ trackStatusFormat(scope.row.trackStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="nextTime" label="下次跟进时间"></el-table-column>
        <el-table-column prop="record" label="沟通纪要"></el-table-column>
        <el-table-column prop="createBy" label="沟通人"></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //查询的数据模型
      searchForm: {
        //过滤条件
        businessId: null,
        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      // 详情数据
      form: {

      },
      occupationOptions: [],
      educationOptions: [],
      majorOptions: [],
      jobOptions: [],
      salaryOptions: [],
      // 性能字典
      sexOptions: [],
      // 意向学科字典
      subjectOptions: [],
      // 状态字典
      statusOptions: [],
      channelOptions: [],
      courseOptions: [],
      trackStatusOptions: [],
      keyItemsOptions: [],
      //跟进记录
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
    }
  },
  created () {
    this.searchForm.businessId = this.$route.query.id
    //查询页面所需的数据字典
    this.getDicList()
    //查询线索信息
    this.getInfo()
    //查询跟进记录
    this.getRecordList()
  },
  methods: {
    //查询线索详情
    getInfo () {
      this.$axios.get("/api/tb/business/view/"+this.searchForm.businessId)
        .then((res) => {
          if (res.data.code == 200) {
            this.form = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
    //查询线索跟进记录
    getRecordList () {
      this.$axios.get("/api/tb/businessRecord/list", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.pageData.pageNo = res.data.data.current;
            this.pageData.pageSize = res.data.data.size;
            this.pageData.totalCount = res.data.data.total;
            this.pageData.totalPageCount = res.data.data.pages;
            this.pageData.data = res.data.data.records;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getRecordList();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.getRecordList();
    },
    // 回显数据字典
    selectDictLabel(datas, value) {
      var actions = [];
      Object.keys(datas).some((key) => {
        if (datas[key].dictValue == ('' + value)) {
          actions.push(datas[key].dictLabel);
          return true;
        }
      })
      return actions.join('');
    },
    // 性能字典翻译
    sexFormat (val) {
      return this.selectDictLabel(this.sexOptions, val)
    },
    // 意向等级字典翻译
    levelFormat (val) {
      return this.selectDictLabel(this.levelOptions, val)
    },
    // 意向学科字典翻译
    subjectFormat (val) {
      return this.selectDictLabel(this.subjectOptions, val)
    },
    // 状态字典翻译
    statusFormat (val) {
      return this.selectDictLabel(this.statusOptions, val)
    },
    keyItemsFormat (val) {
      return this.selectDictLabel(this.keyItemsOptions, val)
    },
    trackStatusFormat (val) {
      return this.selectDictLabel(this.trackStatusOptions, val)
    },
    occupationFormat (val) {
      return this.selectDictLabel(this.occupationOptions, val)
    },
    educationFormat (val) {
      return this.selectDictLabel(this.educationOptions, val)
    },
    majorFormat (val) {
      return this.selectDictLabel(this.majorOptions, val)
    },
    jobFormat (val) {
      return this.selectDictLabel(this.jobOptions, val)
    },
    salaryFormat (val) {
      return this.selectDictLabel(this.salaryOptions, val)
    },
    getDicts(dictType){
      return new Promise((resolve, reject) => {
        this.$axios.get("/api/sys/dictData/optionselect/"+dictType)
          .then((res) => {
            if (res.data.code == 200) {
              resolve(res.data);
            } else {
              this.$message.error(res.data.msg);
            }
          })
      })
    },
    //查询数据字典
    getDicList () {
       this.getDicts('sys_user_sex').then(response => {
        this.sexOptions = response.data
      })
      this.getDicts('course_subject').then(response => {
        this.subjectOptions = response.data
      })
      this.getDicts('clue_status').then(response => {
        this.statusOptions = response.data
      })
      this.getDicts('clues_item').then(response => {
        this.channelOptions = response.data
      })
      this.getDicts('communication_point').then(response => {
        this.keyItemsOptions = response.data
      })
      this.getDicts('occupation').then(response => {
        this.occupationOptions = response.data
      })
      this.getDicts('education').then(response => {
        this.educationOptions = response.data
      })
      this.getDicts('major').then(response => {
        this.majorOptions = response.data
      })
      this.getDicts('job').then(response => {
        this.jobOptions = response.data
      })
      this.getDicts('salary').then(response => {
        this.salaryOptions = response.data
      })
      this.getDicts('track_status').then(response => {
        this.trackStatusOptions = response.data
      })
    },
  }
}
</script>
<style scoped>
   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
